@import '../../src/assets/css/default.less';
@import '../../src/assets/css/mixins.less';

@buttonPrefixCls: yh-button;
.border-mixin(@border-color) {
    &::before{
        position: absolute;
        content: '';
        box-sizing: border-box;
        top: 0; bottom: 0; left: 0; right: 0;
        border: 1px solid @border-color; /*no*/
        border-radius: @button-radius;   /*no*/

        @media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 2dppx) {
            width: 200%;
            height: 200%;
            transform: scale(.5);
            transform-origin: 0 0;
            border: 1px solid @border-color;     /*no*/
            border-radius: @button-radius * 2;   /*no*/
        }

        @media (-webkit-min-device-pixel-ratio: 3),(min-resolution: 3dppx) {
            width: 300%;
            height: 300%;
            transform: scale(.3333);
            transform-origin: 0 0;
            border: 1px solid @border-color;     /*no*/
            border-radius: @button-radius * 3;   /*no*/
        }
    }
}
.@{buttonPrefixCls} {
    display: block;
    position: relative;
    outline: 0 none;
    -webkit-appearance: none;
    box-sizing: border-box;
    padding: 0;
    text-align: center;
    font-size: @button-font-size;
    height: @button-height;
    line-height: @button-height;
    border-radius: @button-radius; /*no*/

    // default
    color: @color-text-base;
    background-color: @fill-base;
    // border: @border-width solid @border-color-base; /*no*/

    &:active {
        background-color: @fill-tap;
    }

    &&-disabled {
        color: rgba(0,0,0,.3);
        opacity: .6;
        &:active {
            background-color: @fill-base;
        }
    }

    &-primary {
        color: @color-text-base-inverse;
        background-color: @primary-button-fill;
        // border: @border-width solid @primary-button-fill;/*no*/
        .border-mixin(@primary-button-fill);

        // &:active, // uc browser not work normal
        &.@{buttonPrefixCls}:active {
            background-color: @primary-button-fill-tap;
        }

        &.@{buttonPrefixCls}-disabled {
            color: hsla(0,0%,100%,.6);
            opacity: .4;
            &:active {
                background-color: @primary-button-fill;
            }
        }
    }

    &-warning {
        color: @color-text-base-inverse;
        background-color: @brand-error;
        &.@{buttonPrefixCls}:active {
            background-color: #d24747;
        }
        &.@{buttonPrefixCls}-disabled {
            color: hsla(0,0%,100%,.6);
            opacity: .4;
            &:active {
                color: hsla(0,0%,100%,.6);
                background-color: @brand-error;
            }
        }
    }

    &-ghost {
        .border-mixin(@ghost-button-color);
        color: @ghost-button-color;
        background-color: transparent;
        // border: @border-width solid @ghost-button-color; /*no*/
        // &:active, // uc browser not work normal
        &.@{buttonPrefixCls}:active {
            //color: @color-text-base-inverse;
            //background-color: @ghost-button-fill-tap;
            //border: @border-width solid @ghost-button-color; /*no*/
            color: rgba(16, 142, 233, 0.6);
            background-color: transparent;
            //border: @border-width solid rgba(16, 142, 233, 0.6); /*no*/
        }
        &.@{buttonPrefixCls}-disabled {
            //  border: @border-width solid rgba(0,0,0,.2);/*no*/
            .border-mixin(rgba(0,0,0,.2));
            color: rgba(0,0,0,.2);
            &:active {
                color: rgba(0,0,0,.2);
            }
        }
    }

    &-inline {
        display: inline-block;
        padding: 0 @button-h-spacing;
    }

    &-small {
        font-size: @button-font-size-sm;
        height: @button-height-sm;
        line-height: @button-height-sm;
        padding: 0 @button-h-spacing;
        // border-radius: @button-radius;
    }

    //&,
    //&-primary,
    //&-ghost,
    //&-warning {
    //    &.@{buttonPrefixCls}-disabled {
    //      //color: @color-text-disabled;
    //      //background-color: @fill-disabled;
    //      border: 0;
    //      color: rgba(0,0,0,.3);
    //      opacity: .6;
    //      &:active {
    //
    //      }
    //    }
    //}
}


.wrap {
        height: 100%;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-word;
        white-space: nowrap;
}
// @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
//     html:not([data-scale]) .@{buttonPrefixCls} {
//         position:relative;
//         border: none;
//         -webkit-transform: translateZ(0);
//         transform: translateZ(0);
//         &:before {
//             content: "";
//             position: absolute;
//             left: 0;
//             top: 0;
//             width: 200%;
//             height: 200%;
//             border: @border-width solid @border-color-base; /*no*/
//             border-radius: @button-border-radius;
//             -webkit-transform-origin: 0 0;
//             -ms-transform-origin: 0 0;
//             transform-origin: 0 0;
//             -webkit-transform: scale(.5);
//             -ms-transform: scale(.5);
//             transform: scale(.5);
//             box-sizing: border-box;
//             pointer-events: none;
//             z-index: -1;
//         }
//     }

//     html:not([data-scale]) .@{buttonPrefixCls}-primary {
//         &:before {
//             border: @border-width solid @primary-button-fill;/*no*/
//         }
//     }

//     html:not([data-scale]) .@{buttonPrefixCls}-warning {
//         &:before {
//             border: @border-width solid @brand-error;/*no*/
//         }
//     }

//     html:not([data-scale]) .@{buttonPrefixCls}-ghost {
//         &:before {
//             border: @border-width solid @ghost-button-color;/*no*/
//         }
//         &.@{buttonPrefixCls}-disabled {
//             &:before {
//                 border: @border-width solid rgba(0,0,0,.2);/*no*/
//             }
//         }
//     }
// }